<template>
    <!-- 订单详情对话框 -->
    <el-dialog :title="title" v-model="open" width="680px" append-to-body>
      <div class="order-detail-container">
        <!-- 基本信息 -->
        <el-descriptions :column="2" border>
          <el-descriptions-item label="订单编号" min-width="120">{{ orderInfo.orderNo }}</el-descriptions-item>
          <el-descriptions-item label="商品名称">{{ orderInfo.skuName }}</el-descriptions-item>
          <el-descriptions-item label="订单金额">{{ orderInfo.amount }}元</el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <dict-tag :options="order_status" :value="orderInfo.status"/>
          </el-descriptions-item>
          <el-descriptions-item label="设备编号">{{ orderInfo.innerCode }}</el-descriptions-item>
          <el-descriptions-item label="设备地址">{{ orderInfo.address }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ parseTime(orderInfo.createTime) }}</el-descriptions-item>
          <el-descriptions-item label="完成时间">{{ parseTime(orderInfo.finishTime) }}</el-descriptions-item>
          
          <!-- 支付相关（根据状态显示） -->
          <el-descriptions-item v-if="orderInfo.status === '已完成'" label="支付方式">
            {{ orderInfo.payType }}
          </el-descriptions-item>
          <el-descriptions-item v-if="orderInfo.status === '已完成'" label="交易单号">
            {{ orderInfo.transactionId }}
          </el-descriptions-item>
        </el-descriptions>
  
        <!-- 操作按钮 -->
        <div class="action-buttons">
          <el-button 
            v-if="orderInfo.status === '已完成'" 
            type="danger" 
            @click="handleRefund"
          >退款</el-button>
          
          <el-button 
            v-if="orderInfo.status === '待支付'" 
            type="warning" 
            @click="handleCloseOrder"
          >关闭订单</el-button>
        </div>
      </div>
  
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { parseTime } from '@/utils/ruoyi'; // 时间格式化方法
  
  const props = defineProps({
    // 订单状态字典
    order_status: {
      type: Array,
      default: () => []
    }
  });
  
  const open = ref(false);
  const title = ref('订单详情');
  const orderInfo = ref({
    orderNo: '',
    skuName: '',
    amount: 0,
    status: '',
    innerCode: '',
    address: '',
    createTime: '',
    finishTime: '',
    payType: '',
    transactionId: ''
  });
  
  // 显示对话框
  const showDialog = (data) => {
    orderInfo.value = Object.assign({}, data);
    open.value = true;
  };
  
  // 操作处理
  const handleRefund = () => {
    console.log('发起退款', orderInfo.value);
  };
  
  const handleCloseOrder = () => {
    console.log('关闭订单', orderInfo.value);
  };
  
  const cancel = () => {
    open.value = false;
  };
  
  const submit = () => {
    // 提交逻辑
    open.value = false;
  };
  
  defineExpose({ showDialog });
  </script>
  
  <style scoped>
  .order-detail-container {
    padding: 15px 20px;
  }
  
  .action-buttons {
    margin-top: 20px;
    text-align: right;
  }
  
  :deep(.el-descriptions__body) {
    background-color: #fafafa;
  }
  
  :deep(.el-descriptions__label) {
    width: 100px;
    font-weight: 500;
  }
  </style>